<template>
  <div class="selectItem">
    <div class="selectItem-bg">
      <div class="selectItem-content">
        <!-- 进度条的导航栏 -->
        <ul class="selectItem-steps clear">
          <li
            v-for="(item, index) in steps"
            :key="'steps' + index"
            :class="index < curStep ? 'selectItem-steps-item-selected' : ''"
            :style="{width: stepsitemwidth}"
            class="selectItem-steps-item"
          ></li>
        </ul>
        <div class="selectItem-exchange">
          <!-- 导航栏进度标识 -->
          <div :style="{ left: steplogoleft }" class="selectItem-exchange-robot"></div>

          <!-- 提示栏 -->
          <div class="selectItem-exchange-content display_line_center">
            {{
              items[String(curStep)].question
                ? items[String(curStep)].question
                : ""
            }}
          </div>

          <!-- 中间二维码框 -->
          <div class="selectItem-exchange-midden display_center hides">
            <div class="selectItem-exchange-midden-qrcode">
            
            </div>
            <div class="selectItem-exchange-midden-logo"></div>
          </div>

          <div class="selectItem-exchange-item">
            <!-- 单选/多选 -->
            <div class="selectItem-exchange-check">
             <div class="selectItem-exchange-check-item">
              {{ items[String(curStep)].isDouble.name }}
             </div>
              <!-- 多选按钮 -->
              <div v-show="moreChange" class="selectItem-exchange-check-anniu">
                <div>全选:</div>
                <div>
                  <van-switch v-model="allChecked" size="25px"/>
                </div>
                
              </div>
            </div>
            <!-- 选择体 -->
            <ul class="selectItem-exchange-item-ul clear">
              <li
                class="selectItem-exchange-item-ul-li"
                :class="checkSelect(item.id) > -1 ? 'hasSelect' : ''"
                @click="checkWay(item)"
                v-for="(item, index) in items[String(curStep)].list"
                :key="index + 'item'"
              >
                {{ item.name }}
              </li>
            </ul>
            <div class="selectItem-exchange-btn display_center">
              <van-button
                class="my_button_left"
                @click="backStep"
                :disabled="curStep == 1"
                type="info"
                size="large"
                color="#b41111"
                >返 回</van-button
              >
              <van-button
                class="my_button_right"
                @click="nextStep"
                :disabled="hasSelectItem.length == 0"
                type="info"
                size="large"
                color="#1472FF"
                >确 定</van-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getSubjet,
  getUnit,
  getUnievaluationQuestiont,
} from "@/server/api.js";

import { GetUrlParame } from "@/utils/utils";
import { mapGetters } from "vuex";
export default {
  name: "selectItem",
  components: {},
  data() {
    let that = this;
    return {
      steps: 5,   // 导航栏的维度
      curStep: 1,  // 当前导航栏
      elewidth: 0,  // 显示页的宽度
      allChecked: false,  // 导航栏中的多选按钮状态
      temporaryStorage: "",
      commitParam: {},
      /* 原本的 items */
     /*
      items: {
        1: {
          question: "为了更好的评测，请选择学科",
          list: [],
          isDouble: {
            key: 1,
            name: "单选",
          },
        },
        2: {
          question: "请选择教材版本",
          list: [],
          isDouble: {
            key: 1,
            name: "单选",
          },
        },
        3: {
          question: "请选择年级",
          list: [],
          isDouble: {
            key: 1,
            name: "单选",
          },
        },
        4: {
          question: "请选择章节（多选）",
          list: [],
          isDouble: {
            key: 2,
            name: "多选",
          },
        },
        5: {
          question: "请选择难度",
          list: [
            {
              id: 1,
              name: "困难",
            },
            {
              id: 0,
              name: "简单",
            },
          ],
          isDouble: {
            key: 1,
            name: "单选",
          },
        },
      },
      */
    /* 修改 - 20240304 */
    /*
        页面导航操作的顺序
        测试：2024/3/4 --> 
          顺序更改：
                1.选学科 -- 单选
                  【初中生物】【初中地理】
                2.【测试系统】【日常测试】(对应售前/售后)
                3.选版本 -- 单选
                  生物包含【人教版】【苏教版】【苏科版】【北京版】【北师大版】【济南版】【冀少版】【鲁科版】，
                  地理包含【人教版】【湘教版】【鲁教版】【商务星球版】【中图版】【粤教版】【晋教版】【仁爱版】【人文地理】
                4.选阶段 -- 多选
                  【七上前半学期】【七上后半学期】【七下前半学期】【七下后半学期】
                  【八上前半学期】【八上后半学期】【八下前半学期】【八下后半学期】
                5.选课型 -- 单选
                【预科/同步】【复习】对应难易
      */
      items: {
        1: {
          question: "为了更好的评测，请选择学科",
          list: [],
          isDouble: {
            key: 1,
            name: "单选",
          },
        },
        2: {
          question: "评测模式",
          list: [
            {
              id: 0,
              name: "测试系统"
            },
            {
              id: 1,
              name: "日常测试"
            }
          ],
          isDouble: {
            key: 1,
            name: "单选",
          },
        },
        3: {
          question: "请选择教材版本",
          list: [],
          isDouble: {
            key: 1,
            name: "单选",
          },
        },
        4: {
          question: "请选择年级",
          list: [],
          isDouble: {
            key: 2,
            name: "多选",
          },
        },
        5: {
          question: "请选择课型",
          list: [
            {
              id: 0,
              name: "复习",
            },
            {
              id: 1,
              name: "预科/同步",
            },
          ],
          isDouble: {
            key: 1,
            name: "单选",
          },
        },
        /* ===== list/this.allBookList 数据格式 ====
        {
          id: ,
          name: 学科名称(一年级...)
          children:[
            {
              id: ,
              name: 版本(人教版...)
              children:[
                {
                  id: ,
                  name: 年级
                  bookId: 年级课程id
                }
              ]
            }
          ]
        }
        */
      },
      hasSelectItem: [],
      testModal: 0, // 测评模型 0.测试系统 1.日常测试 
      // 1
      form: {},
      allBookList: [],
      editionArr: [],
      bookArr: [],
      unitArr: [],
      sheetVisible: false,
      selectChapterId: [],
      cur_param: {},
      // {subName: 学科, editionName: 版本, gradeName: 年级, chapterList: 章节,} ==> store.state.user.subInfo
      SubInFoSave:{}
    };
  },
  computed: {
    ...mapGetters(['info', "param"]),
    steplogoleft(){ // 导航栏标识left
      return (this.curStep-1) * this.elewidth / this.steps + this.elewidth*0.9/100 + "px";
    },
    stepsitemwidth() {  // 导航栏的width
      return this.elewidth / this.steps - this.elewidth * 1/100  + "px";
    },
    moreChange() {
      return this.items[this.curStep].isDouble.key == 2;
    }
  },
  watch: {
    // 多选框是否被选中
    allChecked(newdata, olddata) {
      // 全选
      try {
        if (newdata && this.items[this.curStep].isDouble.key == 2) {
          this.hasSelectItem = [];
          var list = this.items['4'].list;
          if (list.length > 0) {
            list.map(v => {
              this.hasSelectItem.push(v.id);
            });
          }
          list = null;
        } else {
          this.hasSelectItem = [];
        }
        return;
      } catch (err) {
        this.$toast("数据异常，请重试!");
      }
    },
    
  },
  created() {
    /*
    if(!this.info.id){
          this.$router.push({
              path: "/home",
          });
          return
      }
      */
  },
  mounted() {
    this.elewidth = this.$el.getElementsByClassName("selectItem-content")[0].offsetWidth;
    this.getSubjet();
  },

  methods: {
    // 获取版本/年纪
    getEditionGrade(type) {
      // 获取版本 - 人教版之类的
      if (type == 3) {
        console.log(this.allBookList);
        var banben;
        for (var item of this.allBookList){
          if (item.id == this.SubInFoSave.subName) {
            banben = item.children;
            break;
          }
        }
        
        this.items['3'].list = banben || [];
      }
      // 获取年级
      else if (type == 4) {
         for (var item of this.allBookList){ // 学科
           
              if (item.id == this.SubInFoSave.subName) {
                for (var item1 of item.children){  // 版本
                  if (item1.id == this.SubInFoSave.editionName) {
                    this.items['4'].list = item1.children;  // 年级
                    return;
                  }
                }
              }  
            }
      }
      return;
    },
    // 初始化多选框
    checkinit() {
      if (this.items[this.curStep].isDouble.key == 2) {
        this.allChecked = false;
      }
    },
    // 返回 this.items 中的 list数组
    returnList(step) {
      try {
        switch (Number(step)) {
          case 3: // 版本
            this.getEditionGrade(3);
            break;
          case 4: // 年级 - 多选
           this.getEditionGrade(4);
            break;
          default: break;
        }
      } catch (e) {
        this.$toast("数据异常,退出重试")
      }

      /*
      this.items[String(step - 1)].list.map((item) => {
        if (item.id == this.hasSelectItem[0]) {
          if (this.curStep <= 3) {
            this.items[String(step)].list = item.children;
          } else {
            this.getUnit(item);
          }
          // this.remberSubInFo(this.curStep -1,item.name)
        }
      });
      */
    },
    // 记录导航栏的选择内容
    remberSubInFo(step,name){
      if(step == 1){  // 学科  -- 单选
        this.SubInFoSave.subName = name[0];
      }else if(step == 2){ // 测评/日常  -- 单选
        if(this.testModal == name[0]) return;
        if (this.testModal == 0) {
          this.steps = 4;
          this.commitParam.difficulty = 4;
        } else {
          this.steps = 5;
          delete this.commitParam.difficulty;
        }
        this.testModal = name[0];
      }else if(step == 3){ // 版本  -- 单选
        this.SubInFoSave.editionName = name[0];
      }else if(step == 4){ // 年级  -- 多选
        this.SubInFoSave.gradeName = name;
        this.SubInFoSave.chapterList = [];
        this.info.subInfo = this.SubInFoSave;
        this.$store.dispatch("setInfo", this.info);
      } else if (step == 5) {
        this.commitParam.difficulty = name[0];
      }
      return;
    },
    
    /* 点击确认 进入下一页 ==> 顺序: 保存该页信息-下页显示 */
    nextStep() {
      this.remberSubInFo(this.curStep, this.hasSelectItem);
      if (this.curStep >= this.steps) {
        // 获取所选的年级的bookId对应的所有章节
        // for (){ }
        this.onSubmit();
      } else {
        this.returnList(this.curStep + 1);
        this.curStep++;
        this.checkinit();
      }
      return

      /*
      if (this.curStep > this.steps-1) {
        // 难度选择 - 1容易 2较容易 3中档 4困难 5较困难
        this.commitParam.difficulty = this.hasSelectItem[0];
        this.onSubmit();
      } else {
        this.curStep += 1;
        if (this.curStep <= this.steps-1) {
          this.returnList(this.curStep);
        } else {
          this.commitParam.unit = this.hasSelectItem;
          this.remberSubInFo(4,this.hasSelectItem)
          
        }
        this.hasSelectItem = [];
      }
      */
    },
    /* 点击导航图标 回退到上一页 */
    backStep() {
      this.curStep--;
    },
    // 导航栏中的选择 -- 是否被选择，样式改变为已选择和未选择
    checkSelect(id) {
      let index = this.hasSelectItem.indexOf(id);
      return index;
    },
    // 导航栏中的选择 -- 点击选择
    checkWay(item) {
      let index = this.checkSelect(item.id);
      if (index == -1) {
        if (this.items[this.curStep].isDouble.key == 1) {
          this.hasSelectItem = [];
        }
        this.hasSelectItem.push(item.id);
      } else {
        this.hasSelectItem.splice(index, 1);
      }
    },
    // 导航栏完成选择 -- 显示试题
    onSubmit() {
      let newParam = Object.assign({},this.param,this.commitParam);
      this.$store.dispatch("setParam", newParam);
      //   Indicator.open("Loading...");
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,  // 禁止背景点击
        duration:0, // 持续时间 - 0表示长时间显示
      });
      // 获取试题
      getUnievaluationQuestiont(this.commitParam).then((res) => {
        this.$toast.clear();
        if (res.code == 200) {
          if (res.data && res.data.length > 0) {
            this.$store.dispatch("setQuertionInfo", res.data);
            this.$router.push({
              path: "/test",
            });
            return;
          }
        }
          this.$toast({
            message: "暂无试题",
            position: "middle",
            duration: 2000,
          });
      });
    },
    // 判断是否是微信客户端
    isWeiXin() {
      //检测环境是否为微信
      let ua = window.navigator.userAgent.toLowerCase();
      return ua.match(/MicroMessenger/i) == "micromessenger";
    },
    // 获取 学科、版本、年级
    getSubjet() {
      getSubjet().then((res) => {
        if (res.code == 200) {
          this.allBookList = res.data;
          this.items["1"].list = res.data;
        }
        
      });
    },
    // 获取 章节
    /*
    [
      {
        id: ,
        name: 章节名称
        order: 
      }
    ]
    */
    getUnit(item) {
      getUnit(item.bookId).then((res) => {
        if (res.code == 200) {
          this.commitParam.bookId = item.bookId;
          this.items["4"].list = res.data;
        }
      });
    },
  },
};
</script>